這篇文章的內容可以拆分成上下兩篇，分別介紹 UI 元件的設置與功能，以及如何實現鬧鐘的資料存取和推播通知功能。

第一篇：Swift Clock App 實作（上）－新增鬧鐘頁面 UI 設定

1. 初始化界面與設置 UI 元件

在這一篇中，我們將介紹如何使用 UIKit 來建立一個新增鬧鐘的介面。首先，在 viewDidLoad 中設置 UI 並根據是否編輯已有鬧鐘來動態設置標題與按鈕文字。

override func viewDidLoad() {
    super.viewDidLoad()
    setUI()
    setupTextFieldDelegate()
    if let alarm = alarmToEdit, !alarm.isInvalidated {
        populateFields(with: alarm)
    } else {
        print("Invalid or deleted alarm")
    }
}

2. UI 設置

我們需要設置按鈕的內容與格式，根據編輯模式顯示「刪除鬧鐘」按鈕，並設置「儲存」和「取消」的功能：

func setUI() {
    title = alarmToEdit == nil ? "加入鬧鐘" : "編輯鬧鐘"
    navigationItem.rightBarButtonItem = UIBarButtonItem(title: "儲存", style: .plain, target: self, action: #selector(doneTapped))
    navigationItem.leftBarButtonItem = UIBarButtonItem(title: "取消", style: .plain, target: self, action: #selector(cancelTapped))
    updateRepeatButtonTitle()
    updateSoundButtonTitle()
    
    btnDelete.isHidden = alarmToEdit == nil
    btnDelete.setTitle("刪除鬧鐘", for: .normal)
    btnDelete.setTitleColor(.red, for: .normal)
    btnDelete.addTarget(self, action: #selector(deleteTapped), for: .touchUpInside)
}

3. 設置重複日期和鈴聲選項

用戶可以點擊按鈕來選擇鬧鐘的重複日期及鈴聲，並動態更新按鈕的標題：

func updateRepeatButtonTitle() {
    let daysOfWeek = ["週日", "週一", "週二", "週三", "週四", "週五", "週六"]
    let selectedDays = repeatDays.enumerated().filter { $0.1 }.map { daysOfWeek[$0.0] }
    switch selectedDays.count {
    case 0:
        btnPushToRepeat.setTitle("永不 >", for: .normal)
    case 7:
        btnPushToRepeat.setTitle("每天 >", for: .normal)
    default:
        btnPushToRepeat.setTitle("\(selectedDays.joined(separator: "、")) >", for: .normal)
    }
}

在這篇文章中，我們介紹了如何設置新增鬧鐘頁面的 UI，包括鬧鐘時間、重複日期及鈴聲選項。下一篇將繼續介紹如何保存鬧鐘資料至 Realm 資料庫，以及如何設定推播通知提醒。